<script lang="ts" setup>

import {reactive, ref, type UnwrapRef} from 'vue';
import type {Rule} from "ant-design-vue/es/form";
import {message} from "ant-design-vue";
import router from "@/router";
import {useInfoStore} from "@/store/user/user.ts";
import {addBulletinAPI} from "@/apis/bulletin.ts";

//表单数据
interface FormState {
  bulletinStatus:string;
  bulletinTitle: string;
  bulletinText: string;
  bulletinCreateName: string | null;
}

const formRef = ref();
const formState: UnwrapRef<FormState> = reactive({
  bulletinStatus: '',
  bulletinTitle: '',
  bulletinText: '',
  bulletinCreateName: '',
});
const rules: Record<string, Rule[]> = {
  bulletinTitle: [
    {required: true, message: '请输入公告标题', trigger: 'change'},
  ],
  bulletinText: [
    {required: true, message: '请输入公告内容', trigger: 'change'},
  ],
};
const userStore = useInfoStore().userInfo;
const onSubmit = () => {
  formRef.value
      .validate()
      .then(async () => {
        formState.bulletinCreateName = userStore.userName
        formState.bulletinStatus = '已发布'
        console.log('提交', formState);
        const res = await addBulletinAPI(formState);
        if (res.data.flag) {
          message.success('添加成功');
          router.go(-1)
        } else {
          message.error('添加失败');
        }
      })
      .catch((error: string) => {
        console.log('error', error);
      });

};
const labelCol = {style: {width: '150px'}};
const wrapperCol = {span: 14};

const resetForm = () => {
  formRef.value.resetFields();
};

</script>
<template>
  <div class="addBulletin">
    <div class="top">
      <a-page-header
          sub-title="添加公告表单"
          title="返回"
          @back="() => $router.go(-1)"
      />
      <a-divider orientation="left" style="color:#4D7181; font-size: 20px;padding: 0 50px">公告-信息</a-divider>
    </div>
    <div class="bottom">
      <div>
        <a-form
            ref="formRef"
            :label-col="labelCol"
            :model="formState"
            :rules="rules"
            :wrapper-col="wrapperCol"
        >
          <a-row gutter="16"> <!-- 使用a-row作为行容器，gutter设置列间距为16px -->
            <a-col :span="12"> <!-- 第一列占12格 -->
              <a-form-item ref="bulletinTitle" label="公告标题" name="bulletinTitle">
                <a-input v-model:value="formState.bulletinTitle"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item ref="bulletinText" label="公告内容" name="bulletinText">
            <a-textarea v-model:value="formState.bulletinText"
                        :auto-size="{minRows: 6, maxRows: 10}"
                        :maxlength="500"
                        show-count
            />
          </a-form-item>
          <div class="form-button">
            <a-button ghost type="primary" @click="onSubmit">保存公告</a-button>
            &nbsp &nbsp &nbsp &nbsp
            <a-button danger ghost type="primary" @click="resetForm">重置表单</a-button>
          </div>

        </a-form>
      </div>
    </div>

  </div>

</template>

<style scoped>
.addBulletin {
  width: 100%;
  height: 100%;

  .bottom {
    padding-right: 50px;

    .form-button {
      margin-right: 100px;
      width: 400px;
      display: flex;
      float: right;
      justify-content: right;
    }
  }

}
</style>
